// import { Table} from 'antd';
import { Icon } from 'choerodon-ui';
import { Button, DataSet, Table } from 'choerodon-ui/pro';
import React, { FC } from 'react';

import { ColumnProps } from 'choerodon-ui/pro/lib/table/Column';
import { TableEditMode, TableCommandType } from 'choerodon-ui/pro/lib/table/enum';

interface TableFormDateType {
  key?: string;
  workId?: string;
  name?: string;
  department?: string;
}
interface TableFormProps {
  value?: TableFormDateType[];
  dataSet: DataSet;
}

const defaultRowData: TableFormDateType = {
  workId: '',
  name: '',
  department: '',
};

const TableForm: FC<TableFormProps> = ({ dataSet }) => {

  const newMember = () => {
    dataSet.create({...defaultRowData});
  };

  const columns: ColumnProps[] = [
    {
      name: 'name',
      key: 'name',
      width: 200,
      editor: true,
    },
    {
      name: 'workId',
      width: 200,
      editor: true,
    },
    {
      name: 'department',
      key: 'department',
      width: 200,
      editor: true,
    },
    {
      header: '操作',
      command: [TableCommandType.edit, TableCommandType.delete],
    },
  ];

  return (
    <>
      <Table dataSet={dataSet} columns={columns} editMode={TableEditMode.inline} />
      <Button style={{ width: '100%', marginTop: 16, marginBottom: 8 }} onClick={newMember}>
        <Icon type="add" />
        新增成员
      </Button>
    </>
  );
};

export default TableForm;
